<template>
  <div class="checkbox-group">
    <h4>复选框组</h4>

    <div class="checkbox-list">
      <div v-for="item in items" :key="item.id" class="checkbox-item">
        <el-checkbox
          :label="item.value"
          v-model="localSelected"
          @change="handleCheckboxChange"
        >
          {{ item.label }}
        </el-checkbox>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CheckboxGroup",
  props: {
    items: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      localSelected: [],
    };
  },
  watch: {
    localSelected: {
      handler(newVal) {
        // 当选择变化时，向父组件发射事件
        this.$emit("selection-change", newVal);
      },
    },
  },
  methods: {
    refClick() {
      return { name: "小明", age: 18 };
    },
    handleCheckboxChange() {
      // 确保数据同步
      this.$emit("selection-change", this.localSelected);
    },
  },
};
</script>

<style scoped>
.checkbox-group {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 16px;
  background-color: #f8f9fa;
}

.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checkbox-item {
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.checkbox-item:hover {
  background-color: #f5f7fa;
}
</style>
